<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="resources/css/examples.css" />
   
        
    <script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="js/ext/ext-all-debug.js"></script>    
    <script type="text/javascript" src="js/ext/examples.js"></script>
    <script language="javascript" src="../state/save-state.php"></script>
    <script language="javascript" src="../state/get-state.php"></script>
    <script type="text/javascript" src="js/state/SessionProvider.js"></script>
    <script type="text/javascript" src="js/tabs/TabCloseMenu.js"></script>
    <script type="text/javascript" src="js/blog-viewer/MyHTMLEditor.js"></script>
    <link rel="stylesheet" type="text/css" href="resources/css/blog-viewer/blog-viewer.css" />
<script type="text/javascript">
Ext.onReady(function(){
	Ext.QuickTips.init();
	
	// turn on validation errors beside the field globally
	Ext.form.Field.prototype.msgTarget = 'side';
	
	var bd = Ext.getBody();
	bd.createChild({tag: 'h2', html: 'Form 3 - A little more complex'});
	
	
	var top = new Ext.FormPanel({
	    labelAlign: 'top',
	    frame:true,
	    title: 'Create a new article',
	    bodyStyle:'padding:5px 5px 0',
	    width: 600,
	    items: [{
            columnWidth:.5,
            layout: 'form',
            items: {
                xtype:'textfield',
                fieldLabel: 'Title',
                name: 'title',
                anchor:'95%'
            }
	    },{
	        xtype:'myhtmleditor',
	        id:'content',
	        fieldLabel:'Content',
	        height:200,
	        anchor:'98%'
	    }],
	
	    buttons: [{
	        text: 'Save',
	        type: 'submit',
	        scope: this,
	        handler: function(){
	            top.getForm().submit({
	                url:'CreateArticle', 
	                waitMsg:'Saving Article...',
	                success: function(f, a){
	                    
	                    Ext.MessageBox.alert('Success',
	                        'The article has been saved.');
	                },
	                failure: function(f, a){
	                    Ext.MessageBox.alert("hehe","enen");
	                    f.markInvalid(a.result.errors);
	                }
	            });
	        }
	    },{
	        text: 'Cancel',
	        handler: function(){
                var x = Ext.get('testcontent');
                var y = Ext.getCmp('content').getDoc();
                y.innerHTML = x.dom;
	        }
	    }]
	});
	
	top.render(document.body);
    
    var nodes = Ext.query('.test-class');
    for(var i=0; i< nodes.length; i++){
        Ext.get(nodes[i]).applyStyles("background-color:yellow;");
        Ext.get(nodes[i]).hover(
            function(e){
                
                Ext.MessageBox.show({
                   title: 'Address',
                   msg: 'Please enter your address:',
                   width:300,
                   buttons: Ext.MessageBox.OKCANCEL,
                   multiline: true,
                   fn: showResult,
                   animEl: 'mb3'
               });
            },
            function(){
            }
        );
    }
    
    function showResultText(btn, text){
        Ext.example.msg('Button Click', 'You clicked the {0} button and entered the text "{1}".', btn, text);
    };
    
    function showResult(btn){
        Ext.example.msg('Button Click', 'You clicked the {0} button', btn);
    };

});
</script>
<title>Create a new article</title>
</head>
<body>
<div id="header"><div style="float:right;margin:5px;" class="x-small-editor"></div></div>
<div>
<!-- Template used for Blog Items -->
<textarea id="preview-tpl" style="display:none;">
    <div class="post-data">
        <span class="post-date">{pubDate:date("M j, Y, g:i a")}</span>
        <h3 class="post-title">{title}</h3>
        <h4 class="post-author">by {author:defaultValue("Unknown")}</h4>
    </div>
    <div class="post-body">{content:this.getBody}</div>
</textarea>
</div>

<div id="testcontent">
<h3 id="link5">Creating a Range object from a Selection object</h3>
<p>Most of the time, though, you want to play around with the Range object that 
represents the user selection. In the Microsoft model this is already possible: 
<code>userSelection</code> is a Text Range. In the W3C-compliant browsers, 
though, <code>userSelection</code> is still a Selection object, and the time has 
come to create a Range object that spans the same content as the Selection 
object.</p>
<p>This is done as follows:</p>
</div>

<div>
<span class="test-class">This is a paragraph for test class.</span>
</div>

</body>
</html>